import React, { useEffect, useRef } from "react";
import { Animated, View, StyleSheet, Dimensions } from "react-native";

const { height: screecHeight,width: screenWidth } = Dimensions.get("window");
// const SCAN_AREA_SIZE = 410;  // 扫描区域大小

const ScannerAnimation = () => {
  const animationValue = useRef(new Animated.Value(0)).current;

 
  useEffect(() => {
    // 创建一个不断循环的动画
    const loopAnimation = Animated.loop(
      Animated.sequence([
        Animated.timing(animationValue, {
          toValue: 600, // 结束位置
          duration: 2000, // 持续时间
          useNativeDriver: true,
        }),
        Animated.timing(animationValue, {
          toValue: 0, // 返回初始位置
          duration: 0, // 立即回到起始点
          useNativeDriver: true,
        }),
      ])
    );

    loopAnimation.start();

    return () => loopAnimation.stop(); // 组件卸载时停止动画
  }, []);

  // 透明度插值：前 500ms 从 0 到 1，最后 500ms 从 1 到 0
  const opacityInterpolation = animationValue.interpolate({
    inputRange: [0, 150, 450, 600], // 让渐变更平滑
    outputRange: [0, 1, 1, 0], // 渐变透明度
  });


  return (
    <View style={styles.container}>
    <Animated.View
      style={[
        styles.scanLine,
        {
          transform: [{ translateY: animationValue }],
          opacity: opacityInterpolation, // 动态控制透明度
        },
      ]}
    >
      
    </Animated.View>
    {/* <View style={styles.tail}></View>  */}
  </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: screenWidth,
    height: screecHeight - 200,
    position: "absolute",
    overflow: "hidden",
    justifyContent: "center",
  },
  scanLine: {
    width: screenWidth - 10,
    height: 3,
    backgroundColor: "rgb(76, 186, 187)",
    // backgroundColor: "red",
    position: "absolute",
    top: 0,
    left: 5,
    borderRadius: 2,
  },

});

export default ScannerAnimation;
